<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<body>
		<!--
			id="tabledemo"  方便js获取jquery 获取到
			lay-filter="tabledemo" 方便layui拿到它
		-->
		<table id="tabledemo" lay-filter="tabledemo"></table>
	</body>
	<script type="text/javascript" src="../layui/layui.js" ></script>
	<script>
		// 使用table和layer控件
		layui.use(["table","layer"],function(){
			// 拿到控件的对象
			var table = layui.table;
			var layer = layui.layer;
			
			// 渲染
			table.render({
				elem: '#tabledemo'
				,height: 312
				,url: '../jsonData/userJson.json' //数据接口
				,page: true //开启分页
				,cols: [[ //表头
				   {type: 'checkbox', fixed: 'left'}
				  ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
			      ,{field: 'username', title: '用户名'}
			      ,{field: 'sex', title: '性别', width:80, sort: true,templet : function(data){
			      	if(data.sex=="0"){
			      		return "女";
			      	}else{
			      		return "男";
			      	}
			      }}
			      ,{field: 'city', title: '城市'}
			      ,{fixed : 'right',title :'操作', width : 150, toolbar:'#barDemo'}
			    ]]
			});
			
			// 绑定表格的行工具栏事件
			table.on('tool(tabledemo)',function(obj){
				var data = obj.data;
				// obj 对象保存了点击时的事件和数据
				if(obj.event==='edit'){
					alert("编辑"+data.username);
				}
				if(obj.event==='del'){
					alert("删除"+data.username);
				}
			});
			
		});
	</script>
	<!-- 工具条 -->
	<script type="text/html" id="barDemo">
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</html>
